<template>
  <div
    class="wrapper"
    :class="isDetail && 'is-detail-height'"
    v-loading="maskLoading"
  >
    <!-- 切换顶部组件 -->
    <event-process
      :getOrderInfo="getOrderInfo"
      :orderData.sync="orderData"
      :reldevice.sync="reldevice"
      :monitors.sync="monitors"
      :videoData.sync="videoData"
      :imgsList.sync="imgsList"
      :orderDetail.sync="orderDetail"
      :orderStatus.sync="curOrderStatus"
      :warningOrderId.sync="warningOrderId"
      :maskLoading.sync="maskLoading"
    />
    <!-- 详情 -->
    <event-detail
      v-if="isDetail"
      :orderData="orderData"
      :reldevice="reldevice"
      :monitors="monitors"
      :orderDetail="orderDetail"
      :videoData="videoData"
      :imgsList="imgsList"
      :warningOrderId="warningOrderId"
    />
    <BaseAlarmDetailPage
      v-else
      :orderData="orderData"
      :reldevice="reldevice"
      :monitors="monitors"
      :videoData="videoData"
      :imgsList="imgsList"
      :curOrderStatus="curOrderStatus"
      :warningOrderId="warningOrderId"
    />
  </div>
</template>
<script>
import { getQueryString } from "@/utils/common";
import EventProcess from "@/components/eventManagement/eventProcess.vue";
import BaseAlarmDetailPage from "@/views/pages/eventManagement/alarmEventDetail/BaseAlarmDetailPage.vue";
import EventDetail from "@/components/eventManagement/links/EventDetail.vue";
import { getOrderInfo } from "@/api/modules/eventManagement/eventJudge";
export default {
  name: "eventLinks",
  components: {
    EventProcess,
    BaseAlarmDetailPage,
    EventDetail,
  },
  data() {
    return {
      getOrderInfo: getOrderInfo,
      orderData: {},
      reldevice: {},
      monitors: {},
      videoData: [],
      imgsList: [],
      curOrderStatus: "",
      warningOrderId: "",
      maskLoading: false,
      orderDetail: {},
    };
  },
  computed: {
    isDetail() {
      if (!this.curOrderStatus) {
        // 防止curOrderStatus为空时，子组件多次渲染问题
        return false;
      }
      if (getQueryString("isDetail") === "1" || getQueryString("isDetail")) {
        return true;
      }
      if (getQueryString("ifEdit") === "0") {
        return true;
      }
      if (this.orderData.ifEdit === 0) {
        return true;
      }
      return (
        this.pageType || !["1", "2", "4", "5"].includes(this.curOrderStatus)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100%;
}
.is-detail-height {
  height: calc(100% - 50px);
}
::v-deep .medias-component .scrollBox {
  overflow-x: hidden;
}
</style>
